<script setup lang="ts">
//
</script>

<template>
  <view class="panel topic">
    <view class="title">
      专题
      <navigator hover-class="none" class="more" url="">更多</navigator>
    </view>
    <view class="cards">
      <navigator class="cards-item" hover-class="none" url="">
        <image
          class="image"
          src="https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/topic_1.jpg"
        ></image>
        <view class="name">忙里忙外，回家吃饭忙里忙外，回家吃饭</view>
        <view class="price"> <text class="price-text">19.9元</text>起 </view>
        <view class="extra">
          <text space="ensp" class="icon-heart">1220</text>
          <text space="ensp" class="icon-preview">1000</text>
        </view>
      </navigator>
      <navigator class="cards-item" hover-class="none" url="">
        <image
          class="image"
          src="https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/topic_2.jpg"
        ></image>
        <view class="name">忙里忙外，回家吃饭</view>
        <view class="price"> <text class="price-text">19.9元</text>起 </view>
        <view class="extra">
          <text space="ensp" class="extra-text icon-heart">1220</text>
          <text space="ensp" class="extra-text icon-preview">1000</text>
        </view>
      </navigator>
    </view>
  </view>
</template>

<style lang="scss">
/* 专题 */
.topic {
  .cards {
    justify-content: space-between;
    padding: 15rpx 20rpx 20rpx;
  }
  .image {
    width: 325rpx;
    height: 164rpx;
    border-radius: 4rpx;
  }
  .cards-item {
    width: 325rpx;
    line-height: 1;
    flex: 0;
  }
  .name {
    font-size: 26rpx;
    color: #262626;
    margin-top: 16rpx;
  }
  .price {
    margin-top: 16rpx;
    font-size: 24rpx;
    color: #999;
    .price-text {
      color: #cf4444;
    }
  }
  .extra {
    margin-top: 16rpx;
    font-size: 22rpx;
    color: #666;
    .extra-text {
      margin-right: 20rpx;
      &::before {
        margin-right: 4rpx;
      }
    }
    .icon-preview {
      &:before {
        font-size: 25rpx;
      }
    }
  }
}
</style>
